<template><view>
	<view v-if="modelValue.show" class="yzm_body" @mousemove="touchmove" @mouseup="touchend">
		<view class="zhuti">
			<view :class="['msg', msgText==='验证成功' ? 'green' : (['安全验证', '验证中...'].indexOf(msgText)>-1 ? '' : 'red')]">{{msgText}}</view>
			<view class="title">拖动下方滑块完成拼图</view>
			<view class="movable-area">
				<view id="msg" v-if="zhutuPic === ''">{{msgLoadMsg}}</view>
				<view id="pic" v-else :style="{background: 'url(' + zhutuPic + ') no-repeat 100%/100%'}"></view>
				<view id="line"></view>
				<view :class="['movable-view', {doudong: futu_doudongClass}]" :style="{background: 'url(' + futuPic + ') no-repeat top left/100% 338rpx', left: futu_x+'px', transitionDuration: futu_x===10 ? '300ms' : '0ms'}" 
				@touchstart="touchstart" @touchmove="touchmove" @touchend="touchend" @mousedown="touchstart"></view>
			</view>
			<view class="close iconfont iconguanbi" @click="modelValue.show = false"></view>
		</view>
	</view>
</view></template>
<script>
export default{
	emits: ['success'],
	props:{
		modelValue:	{type: Object, default: {}}
	},
	data(){return{
		zhutuPic: '',//主图
		//缺口图
			futuPic:				'',
			futu_x:					10,			//默认的位置
			futu_anxiaX:			undefined,	//按下时，手指的位置
			futu_doudongClass:		false,
		//提示信息
			msgText: '安全验证',
			msgLoadMsg: '加载中',
	}},
	mounted(){},//该组件被挂载到实例上去之后调用
	methods: {
		shuaxin(){
			uni.request({url: this.$yuming+'/xlg_slideCode/yzm_pic.php',
				data: {
					type:		'shengcheng',
					session_id:	this.$session_id,
					class:		this.modelValue.className
				},
				success: (res) => {
					if(res.data.code === 1){//生成验证码成功
						var url = this.$yuming + '/xlg_slideCode/yzm_pic.php?class='+this.modelValue.className+'&session_id='+this.$session_id+'&time='+(new Date()*1)//time参数作用是 避免触发缓存
						this.futuPic	= url+'&type=futu'
						this.zhutuPic	= url+'&type=zhutu'
					}
				},
				complete: (res) => {
					//错误处理
						setTimeout(() => {
							var errMsg = this.$requestError(res);
							if(typeof(errMsg.msg) === 'string'){
								this.msgLoadMsg = errMsg.msg;
							}
						}, 300);
				}
			});
		},
		touchstart(event){//手指按下
			if(this.futu_anxiaX === undefined && this.futu_x === this.$options.data().futu_x){
				this.futu_anxiaX = this.$isPc ? event.clientX : event.touches[0].clientX;
			}
		},
		touchmove(event){//手指移动
			if(this.futu_anxiaX !== undefined){
				var x = this.$options.data().futu_x + ((this.$isPc ? event.clientX : event.touches[0].clientX) - this.futu_anxiaX),
					[min, max] = [0, this.$upx2px(600 - 79)]//确保不会超出边界【600是父元素的宽度、79是自身元素的宽度】
				this.futu_x = x < min ? min : (x > max ? max : x)
			}
		},
		touchend(event){//手指离开
			if(this.futu_anxiaX !== undefined){
				this.futu_anxiaX = undefined
				if(this.zhutuPic === ''){
					this.futu_x = this.$options.data().futu_x
				}else{
					this.msgText = '验证中...'
					uni.request({url: this.$yuming+'/xlg_slideCode/yzm_pic.php',
						data: {
							type:		'yanzheng',
							session_id:	this.$session_id,
							class:		this.modelValue.className,
							x:			parseInt(this.futu_x * (679 / this.$upx2px(600)))//因为x是相对于movable-area容器宽度的，所以需要算出图片实际宽度相 对于 容器宽度的比例
						},
						success: (res) => {
							if(res.data.code === 1){
								this.$emit('success')
								this.msgText = '验证成功'
								setTimeout(() => {
									this.modelValue.show = false
								}, 300);
							}
						},
						complete: (res) => {
							var errMsg = this.$requestError(res);
							if(typeof(errMsg.msg) === 'string'){
								this.msgText = errMsg.msg
								//启动抖动动画
									this.futu_doudongClass = true//执行抖动的css动画
								//等待抖动结束
									setTimeout(() => {
										//停止抖动
											this.futu_doudongClass = false
										//回到默认的位置
											this.futu_x = this.$options.data().futu_x
										//重载
											if(errMsg.code === 2){
												if(typeof(res.data.error_cishu) === 'undefined' || res.data.error_cishu === 0){//等于空意味着滑块验证码不存在，也是需要刷新的
													this.shuaxin()
												}
											}
									}, 700);
								//恢复原状
									setTimeout(() => {
										this.msgText = '安全验证'
									}, 3500);
							}
						}
					});
				}
			}
		}
	},
	watch: {
		'modelValue.show'(newValue){
			if(newValue === true){
				//设置为初始值
					Object.assign(this, this.$options.data());
				this.shuaxin()
			}
		}
	}
}
</script>
<style lang="scss">
.yzm_body{
	display: flex;
	background: rgba(0,0,0,0.3);
	position: fixed;
	top: 0;
	z-index: 1001;
	width: 750rpx;
	height: 100vh;
	justify-content: center;
	align-items: center;
	.zhuti{
		position: relative;
		flex-direction: column;
		background: #FFF;
		width: 600rpx;
		padding: 20rpx 25rpx 30rpx 25rpx;
		border-radius: 15rpx;
		.msg{
			color: #999;
			font-size: 24rpx;
			&.red{color: red;}
			&.green{color: green;}
		}
		.close{
			position: absolute;
			top: 20rpx;
			right: 20rpx;
			color: #A6A6A6;
			font-size: 36rpx;
			padding: 10rpx;
		}
		.title{
			font-size: 28rpx;
			line-height: 38rpx;
			color: #333;
			margin: 0 0 7rpx 0;
		}
		.movable-area{
			position: relative;
			width: 100%;
			height: 415rpx;
			flex-direction: column;
			#msg{
				width: 100%;
				line-height: 338rpx;
				justify-content: center;
				font-size: 30rpx;
				color: #999;
				background: #F8F8F8;
			}
			#pic{
				width: 600rpx;
				height: 338rpx;
			}
			#line{
				background: #e4e4e4;
				height: 20rpx;
				margin: 42rpx 0 15rpx 0;
				border-radius: 50rpx;
			}
			.movable-view{
				position: absolute;
				top: 0;left: 0;
				width: 79.63rpx;
				height: 100%;
				&:after{
					position: absolute;
					bottom: 0;left: 0;
					content: '';
					box-shadow: rgba(26, 101, 255, 0.52) 0 0 10rpx 1rpx;
					width: 100rpx;
					height: 50rpx;
					border-radius: 50rpx;
					background: rgb(26, 101, 255) url() no-repeat 50% 50%/auto 20rpx;
					margin-left: -10rpx;
				}
				@keyframes doudong{
					20%{transform: translateX(-15px);}
					40%{transform: translateX(15px);}
					60%{transform: translateX(-15px);}
					80%{transform: translateX(15px);}
					100%{transform:translateX(0);}
				}
				&.doudong{
					animation: doudong 500ms linear 1;
				}
			}
		}
	}
}
</style>